<template>
  <el-card>
    <div style="text-align: right;" v-if="$route.query.beFrom !=='CollectionHandle'">
      <el-button type="primary" @click="btn(6)">暂缓催收</el-button>
      <el-button type="primary" @click="btn(1)">激活催收</el-button>
      <el-button type="primary" @click="btn(8)">手动结清</el-button>
      <el-button type="primary" @click="btn(4)">调整策略</el-button>
      <el-button type="primary" @click="btn(5)">申请销账</el-button>
      <el-button type="primary" @click="btn(7)">改派</el-button>
    </div>
    <div style="text-align: right;" v-if="$route.query.beFrom =='CollectionHandle'">
      <el-button type="primary" @click="btn(2)">提交催收结果</el-button>
    </div>
    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="35px%">{{ typeBtn }}
      <div style="width: 90%; margin: 0 auto;">
        <!-- 工单未处理预警配置 -->
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="160px" :rules="rules">
          <el-form-item label="催收策略:" v-if="typeBtn ==2">
            <span>电话催收（最新的策略）</span>
          </el-form-item>
          <el-form-item v-if="typeBtn ==2" label="催收结果:" prop="result">{{ formDig.result }}
            <el-radio-group v-model="formDig.result">
              <el-radio :label="1">有结果</el-radio>
              <el-radio :label="2">无结果</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="typeBtn ==2" label="预计回款时间:" prop="time">
            <el-date-picker v-model="formDig.time" type="date" placeholder="选择日期时间" style="width: 40%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="typeBtn ==2" label="预计回款金额:" prop="price">
            <el-input placeholder="请输入预计回款金额" v-model="formDig.price" @input="formDig.price=formDig.price.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <!-- 调整策略 -->
          <el-form-item v-if="typeBtn ==4" label="调整策略:" prop="adjustmentStrategy">{{ formDig.adjustmentStrategy }}
            <el-radio-group v-model="formDig.adjustmentStrategy">
              <el-radio :label="1">电话催收</el-radio>
              <el-radio :label="2">发函催收</el-radio>
              <el-radio :label="3">实地催收</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 暂缓催收 || 手动结清 -->
          <el-form-item v-if="typeBtn ==8" label="待收金额:">
            <span>10000</span>
          </el-form-item>
          <el-form-item v-if="typeBtn ==8" label="结清金额:">
            <span>10000</span>
          </el-form-item>
          <el-form-item v-if="typeBtn ==8" label="收款时间:" prop="collectionTime">
            <el-date-picker v-model="formDig.collectionTime" type="datetime" placeholder="选择日期时间" style="width: 40%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="typeBtn ==6 ||typeBtn ==8 ||typeBtn ==1||typeBtn ==2" label="说明:" prop="instructions">
            <el-input type="textarea" placeholder="请输入说明内容" v-model="formDig.instructions" maxlength="500" :rows="5" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item v-if="typeBtn ==6||typeBtn ==8||typeBtn ==1||typeBtn ==2" label="附件:" prop="attachments">
            <ImageCommon :up-type="2" info="选择附件" :limit="5" v-model="formDig.attachments" isShowTip :fileSize="30" :fileType="['png/jpg/jpeg/pdf/doc/docx/excel']"></ImageCommon>
          </el-form-item>
          <!-- 选择人员 -->
          <div style="display: flex;justify-content: start;align-items: center;" v-if="typeBtn ==7">
            <el-form-item label="用户名称:" label-width="80px">
              <el-input v-model="queryParamsDig.name" clearable placeholder="请输入用户名称" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item label="手机号码:" label-width="80px" style="margin-left: 20px;">
              <el-input v-model="queryParamsDig.iphone" clearable maxlength="11" style="width: 100%;" placeholder="请输入座位数" @input="queryParamsDig.iphone=queryParamsDig.iphone.replace(/^0|[^0-9]/g, '')"></el-input>
            </el-form-item>
            <div style="text-align: right;margin-top: -15px;margin-left: 50px;">
              <el-button size="mini" @click="resetQueryDig">重 置</el-button>
              <el-button size="mini" type="primary" @click="handleQueryDig">查 询</el-button>
            </div>
          </div>{{ multipleSelection }}
          <table-page v-if="typeBtn ==7" :isSelect="true" @selectionChange="handleSelectionChange" :loading="loadingTable" :dataList="dataListTable" border :total="totalTable" :page.sync="queryParamsDig.pageNum" :limit.sync="queryParamsDig.pageSize" @setSizeCurrent="getListTable">
            <!-- 普通列插槽 -->
            <template slot="tableCol">
              <el-table-column label="用户名称" align="center" prop="a" />
              <el-table-column label="用户昵称" align="center" prop="a" />
              <el-table-column label="手机号码" align="center" prop="a" />
              <el-table-column label="组织名称" align="center" prop="a" />
              <el-table-column label="状态" align="center" prop="a" />
              <el-table-column label="创建时间" align="center" prop="a" width="150" />
            </template>
          </table-page>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  // 按钮
  name: 'workOrder',
  props: {
    value: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      title: '',
      totalTable: 0,
      dataListTable: [],
      loadingTable: false,
      multipleSelection: [],
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      typeBtn: null,
      open: false,
      formDig: {},
      rules: {
        adjustmentStrategy: [
          { required: true, message: "请选择调整策略", trigger: "change" },
        ],
        instructions: [
          { required: true, message: "请输入说明", trigger: "blur" },
        ],
        time: [
          { required: true, message: "请选择预计回款时间", trigger: "blur" },
        ],
        collectionTime: [
          { required: true, message: "请输入说明", trigger: "blur" },
        ],
        result: [
          { required: true, message: "请选择催收结果", trigger: "change" },
        ],
        price: [
          { required: true, message: "请输入预计回款金额", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getListTable()
  },
  methods: {
    cancelDig() { this.open = false },
    /** 预警配置 */
    btn(typeBtn) {
      this.typeBtn = typeBtn
      this.open = true
      this.$set(this, 'formDig', {})
      this.$refs["formDig"]?.clearValidate()
      if (typeBtn == 1) {
        this.title = '激活催收'
        this.$set(this.formDig, 'radioCheck', 1)
      } else if (typeBtn == 2) {
        this.title = '提交催收结果'
      } else if (typeBtn == 4) {
        this.title = '调整策略'
        this.$set(this.formDig, 'adjustmentStrategy', 1)
      } else if (typeBtn == 6) {
        this.title = '暂缓催收'
      } else if (typeBtn == 7) {
        this.title = '选择人员'
        this.multipleSelection = []
      } else if (typeBtn == 8) {
        this.title = '手动结清'
      } else if (typeBtn == 5) {
        this.open = false
        this._toPage({
          path: "/collectionModule/collectionManage/applyForWriteOff",
          name: "ApplyForWriteOff",
          query: {
            type: 'CollectionManage',
            beFrom: 'CollectionManage'
          }
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formDig"].validate((valid) => {
        if (valid) {
          this.open = false
          if (this.typeBtn == 1 || this.typeBtn == 6) {
            console.log('-');
          } else if (this.typeBtn == 4) {
            // 接口
          } else if (this.typeBtn == 5) {
            // 接口
          } else if (this.typeBtn == 7) {
            // 接口
          } else if (this.typeBtn == 8) {
            // 接口
          }
        }
      });
    },
    // 获取列表
    getListTable() {
      this.dataListTable = [{ a: 1 }]
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      console.log('1');
    },
    handleQueryDig() {
      this.queryParamsDig.pageNum = 1;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
